<template>
  <div class="make-container">
    <template v-if="ready">
      <MarkDown :showData="showData" v-if="showData.type === 'markdown'" />
      <MindMap v-else-if="showData.type === 'mindMap'" />
      <Tables :showData="showData" v-else-if="showData.type === 'table'"/>
      <Chart :showData="showData" v-else />
    </template>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  import io from '@/utils/http/index.js';

  import Chart from './chart.vue';
  import MarkDown from './markDown.vue';
  import MindMap from './mindMap/index.vue';
  import Tables from './table.vue'

  import initDefaultData from '@/constants/initDefaultData.js';
  import defaultConfig from '@/constants/defaultChartConf.js';
  import { showTypeMap } from '@/constants/showType.js';

  export default defineComponent({
    components: { Chart, MarkDown, MindMap, Tables },
    data() {
      return {
        ready: false,
        showData: {
          id: null,
          type: 'line',
          title: '',
          subtitle: '',
          describe: '',
          data: null,
          config: null,
          apiConfig: null,
          dataSourceType: 0,
        },
      };
    },

    created() {
      this.init();
    },
    methods: {
      init() {
        const params = this.$route.params;
        const query = this.$route.query;
        if (params.id) {
          this.showData.id = params.id;
          io({
            url: '/show/api/module/' + this.showData.id,
          }).then(({ data }) => {
            this.showData.type = data.type;
            this.showData.title = data.title;
            this.showData.subtitle = data.subtitle;
            this.showData.describe = data.describe;
            this.showData.data = JSON.parse(data.data);
            this.showData.config = data.config && JSON.parse(data.config);
            this.showData.apiConfig = data.apiConfig && JSON.parse(data.apiConfig);
            this.showData.dataSourceType = data.dataSourceType;
            this.ready = true;
          });
        } else {
          if (query.type) this.showData.type = query.type;
          this.showData.title = "未命名图表"
          this.showData.data = initDefaultData(this.showData.type);
          this.showData.config = defaultConfig(this.showData.type);
          this.ready = true;
        }
      },
    },
  });
</script>

<style lang="scss">
  .make-container {
    height: calc(100vh - 56px);
  }
</style>
